<template>
  <view class="content">
    <!-- 投诉建议 -->
    <view class="my flex flex-x-end">
      <view class="fz30 green" @click="$jump.navigateTo('/pages/user/feedback')"
        >我的反馈</view
      >
    </view>

    <view class="title flex-y flex-x-center flex-y-center">
      <view class="fz44 bold">填写您遇到的问题</view>
    </view>

    <uni-forms
      class="form"
      ref="formRef"
      :modelValue="state.formData"
      :rules="state.rules"
      label-width="100px"
      label-align="right"
    >
      <uni-forms-item label="反馈标题" name="titile" required>
        <uni-easyinput
          type="text"
          placeholder="请输入反馈标题"
          v-model="state.formData.titile"
        />
      </uni-forms-item>
      <uni-forms-item label="问题类别" name="type" required>
        <!-- <uni-easyinput type="text" placeholder="请选择问题类别" v-model="state.formData.type" /> -->

        <uni-data-picker
          class="bg-white"
          :localdata="typeOptions"
          v-model="state.formData.type"
          popup-title="请选择问题类别"
        >
        </uni-data-picker>
      </uni-forms-item>
      <uni-forms-item label="留言" name="comment" required>
        <uni-easyinput
          maxlength="500"
          type="textarea"
          placeholder="请描述申请反馈意见的具体原因,文字描述(500字以内)"
          v-model="state.formData.comment"
        />
      </uni-forms-item>
    </uni-forms>

    <view class="btn-box">
      <button
        class="btn mt20 fff main-theme-bgcolor"
        form-type="submit"
        :disabled="state.isSend"
        @click="onSubmit"
      >
        提交
      </button>
    </view>

    <filings-modal></filings-modal>
  </view>
</template>

<script setup>
import filingsModal from "@/components/filings/index.vue";
import { ref, reactive, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { addComplaint } from "@/common/js/getData.js";

const { proxy } = getCurrentInstance();

const formRef = ref(null);

const typeOptions = [
  {
    text: "软件问题",
    value: "软件问题",
  },
  {
    text: "硬件问题",
    value: "硬件问题",
  },
  {
    text: "改进意见",
    value: "改进意见",
  },
  {
    text: "代理商问题",
    value: "代理商问题",
  },
  {
    text: "其它",
    value: "其它",
  },
];

const state = reactive({
  isSend: false,
  // 表单数据
  formData: {
    titile: "",
    type: "",
    comment: "",
  },
  rules: {
    // 对titile字段进行必填验证
    titile: {
      rules: [
        {
          required: true,
          errorMessage: "请输入标题",
        },
      ],
    },
    // 对phone字段进行必填验证
    type: {
      rules: [
        {
          required: true,
          errorMessage: "请选择类别",
        },
      ],
    },
    comment: {
      rules: [
        {
          required: true,
          errorMessage: "请输入留言内容",
        },
      ],
    },
  },
});

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
});

// 触发提交表单
const onSubmit = () => {
  formRef.value.validate().then(() => {
    state.isSend = true;
    addComplaint(state.formData)
      .then((res) => {
        uni.showToast({
          icon: "success",
          title: "提交成功",
        });
        state.formData = {
          titile: "",
          type: "",
          comment: "",
        };
      })
      .finally(() => {
        state.isSend = false;
      });
  });
};
</script>

<style lang="less" scoped>
// @import url('@/common/less/common.less');

.my {
  padding: 30rpx;
}

.title {
  height: 204rpx;
}

.form {
  padding: 20rpx;
}

.btn-box {
  padding: 0 40rpx;
}

.service {
  position: fixed;
  bottom: 240rpx;
  right: 40rpx;
  z-index: 90;
  width: 100rpx;
  height: 100rpx;
}
</style>
